<template>
  <div class="flex">
    <el-input
      v-model="inputValue"
      placeholder="请输入景点语音介绍"
      @blur="handleChange"
    >
    </el-input>
    <el-upload
      :action="''"
      :on-success="onSuccessUpload"
      :limit="1"
      :http-request="customUploadRequest"
      :show-file-list="false"
    >
      <el-button type="default">上传语音介绍</el-button>
    </el-upload>
  </div>

</template>

<script>
import { getToken } from '@/utils/auth'
import { defaultApi } from '@/infra/api/http/apiFactory'
import {UPLOAD_URL} from '@/infra/conf/default'
export default {
  name: 'VoiceUpload',
  data() {
    return {
      inputValue: '',
      // headers: {
      //   Authorization: getToken(),
      //   token: getToken(),
      //   // 'X-Xsrf-Token': getXsrfToken(),
      //   AppVersion: AppVersion
      // }
    }
  },
  watch: {
    value() {
      this.inputValue = this.value
    }
  },
  methods: {
    customUploadRequest(option) {
      const data = new FormData()
      data.append('file', option.file)
      defaultApi.post(UPLOAD_URL, data).then(res => {
        console.log(res)
        option.onSuccess(res)
      }).catch(error => {
        console.log(error)
      })
    },
    onSuccessUpload(res) {
      console.log(res, this.imgUrl(res))
      this.inputValue = this.imgUrl(res)
      this.handleChange()
    },
    
    handleChange() {
      this.$emit('input', this.inputValue)
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

